<template>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div class="box">
    <div class="profit">
      <div class="profit_left">
        <div class="wp">
          <div>今日收益：</div>
          <span v-if="this.$store.state.todayprofit >= 0" style="color:red;">{{
            towNumber(this.$store.state.todayprofit * 100) + '%'
          }}</span>
          <span
            v-if="this.$store.state.todayprofit < 0"
            style="color:#06e108;"
            >{{ towNumber(this.$store.state.todayprofit * 100) + '%' }}</span
          >
        </div>
        <div class="wp">
          <div>近一周收益：</div>
          <span v-if="this.$store.state.weekprofit >= 0" style="color:red;">{{
            towNumber(this.$store.state.weekprofit * 100) + '%'
          }}</span
          ><span
            v-if="this.$store.state.weekprofit < 0"
            style="color:#06e108;"
            >{{ towNumber(this.$store.state.weekprofit * 100) + '%' }}</span
          ><span v-if="this.$store.state.weekprofit === '-'">-</span>
        </div>
        <div class="wp">
          <div>近一月收益：</div>
          <span v-if="this.$store.state.monthprofit >= 0" style="color:red;">{{
            towNumber(this.$store.state.monthprofit * 100) + '%'
          }}</span
          ><span
            v-if="this.$store.state.monthprofit < 0"
            style="color:#06e108;"
            >{{ towNumber(this.$store.state.monthprofit * 100) + '%' }}</span
          ><span v-if="this.$store.state.monthprofit === '-'">-</span>
        </div>
      </div>
      <div class="profit_right">
        <div class="wp">
          <div>总收益：</div>
          <span v-if="this.$store.state.totalprofit >= 0" style="color:red;">{{
            towNumber(this.$store.state.totalprofit) + '%'
          }}</span>
          <span
            v-if="this.$store.state.totalprofit < 0"
            style="color:#06e108;"
            >{{ towNumber(this.$store.state.totalprofit) + '%' }}</span
          >
        </div>
        <div class="wp">
          <div>仓位占比：</div>
          <span style="color:yellow"
            >{{
              towNumber(
                (this.$store.state.accountdataspromote[this.$store.state.id]
                  .stock_value /
                  this.$store.state.accountdataspromote[this.$store.state.id]
                    .total_asset) *
                  100
              )
            }}%</span
          >
        </div>
        <div class="wp">
          <div>最大回撤：</div>
          <span style="color:yellow">{{ towNumber(this.maxbackdata) }}%</span>
        </div>
      </div>
    </div>
    <!-- <div style="text-align:center" v-if="!this.show">
      <van-loading size="24px">加载中...</van-loading>
    </div> -->
    <div id="main"></div>
    <div class="briefIntroduction" v-if="this.show">
      <img class="briefIntroductionPhoto" :src="this.img" alt="" />
    </div>
  </div>
</template>
<script>
// 导入echarts
import * as Echarts from 'echarts'
import Vue from 'vue'
import { Loading } from 'vant'
// import _ from 'lodash'
import {
  socketsendgetfollowings,
  socketsendshare1
} from '../assets/js/websocketTest.js'
Vue.use(Loading)
export default {
  data() {
    return {
      todayprofit: '1',
      weekprofit: '1',
      show: false,
      maxbackdata: 0
    }
  },
  computed: {
    CHANGE() {
      return this.$store.state.change
    },
    img() {
      var imgarr = [
        '13011111111',
        '13011111114',
        '13055555555',
        '13055555575',
        '13066666676'
      ]
      if (
        imgarr.indexOf(
          this.$store.state.followaccount[this.$store.state.INDEX]
        ) > -1
      ) {
        return require('../assets/img/' +
          this.$store.state.followaccount[this.$store.state.INDEX] +
          '.png')
      } else {
        return require('../assets/img/wu.png')
      }
    }
  },
  created() {},
  // 此时页面上的元素已经被渲染完毕了
  methods: {
    // 小数点后保留两位的函数
    towNumber(val) {
      return Number(val).toFixed(2)
    },
    getCurrentTime() {
      // 获取当前时间并打印
      var data = new Date()
      this.value =
        data.getFullYear() +
        '-' +
        (data.getMonth() < 9
          ? '0' + (data.getMonth() + 1)
          : data.getMonth() + 1) +
        '-' +
        (data.getDate() <= 9 ? '0' + data.getDate() : data.getDate())
      console.log(this.value)
      this.$store.state.todayTime = this.value
      console.log(this.$store.state.todayTime)
    },
    profit() {
      if (
        this.$store.state.shareTIME.indexOf(this.$store.state.todayTime) > -1
      ) {
        var today = this.$store.state.shareNET.length - 2
        this.$store.state.todayprofit =
          (this.towNumber(
            this.$store.state.accountdataspromote[this.$store.state.id]
              .total_asset / 10000
          ) -
            this.$store.state.shareNET[today]) /
          this.$store.state.shareNET[today]
      } else {
        var today1 = this.$store.state.shareNET.length - 1
        this.$store.state.todayprofit =
          (this.towNumber(
            this.$store.state.accountdataspromote[this.$store.state.id]
              .total_asset / 10000
          ) -
            this.$store.state.shareNET[today1]) /
          this.$store.state.shareNET[today1]
      }
      var week = this.$store.state.shareNET.length - 5
      if (week >= 0) {
        this.$store.state.weekprofit =
          (this.towNumber(
            this.$store.state.accountdataspromote[this.$store.state.id]
              .total_asset / 10000
          ) -
            this.$store.state.shareNET[week]) /
          this.$store.state.shareNET[week]
      } else {
        this.$store.state.weekprofit = '-'
      }
      var month = this.$store.state.shareNET.length - 22
      if (month >= 0) {
        this.$store.state.monthprofit =
          (this.towNumber(
            this.$store.state.accountdataspromote[this.$store.state.id]
              .total_asset / 10000
          ) -
            this.$store.state.shareNET[month]) /
          this.$store.state.shareNET[month]
      } else {
        this.$store.state.monthprofit = '-'
      }
      this.$store.state.totalprofit =
        ((this.towNumber(
          this.$store.state.accountdataspromote[this.$store.state.id]
            .total_asset / 10000
        ) -
          100) /
          100) *
        100
    },
    flashMyChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = Echarts.init(document.getElementById('main'))
      // 获取数据
      // ----------
      // 准备数据和配置项
      // 合并
      // const result = _.merge(res.data,this.options)
      this.$store.state.dataTime = [this.$store.state.shareTIME[0]]
      this.$store.state.dataNet = [0]
      this.$store.state.dataNet1 = [0]
      this.$store.state.NET1 = [0]
      if (
        this.$store.state.shareTIME.indexOf(this.$store.state.todayTime) > -1 ||
        this.$store.state.unExchangeDay.indexOf(this.$store.state.todayTime) >
          -1
      ) {
        this.$store.state.dataTime.push(...this.$store.state.shareTIME)
        this.$store.state.dataNet.push(...this.$store.state.shareNET)
        for (let i = 0; i < this.$store.state.shareNET.length; i++) {
          this.$store.state.NET1[i] = this.towNumber(
            this.$store.state.shareNET[i] - 100
          )
        }
        this.$store.state.dataNet1.push(...this.$store.state.NET1)
      } else {
        this.$store.state.dataTime.push(
          ...this.$store.state.shareTIME,
          this.$store.state.todayTime
        )
        this.$store.state.dataNet.push(
          ...this.$store.state.shareNET,
          this.towNumber(
            this.$store.state.accountdataspromote[this.$store.state.id]
              .total_asset / 10000
          )
        )
        for (let i = 0; i < this.$store.state.shareNET.length; i++) {
          this.$store.state.NET1[i] = this.towNumber(
            this.$store.state.shareNET[i] - 100
          )
        }
        this.$store.state.dataNet1.push(
          ...this.$store.state.NET1,
          this.towNumber(
            this.$store.state.accountdataspromote[this.$store.state.id]
              .total_asset /
              10000 -
              100
          )
        )
      }
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['账户收益率(%)'],
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          axisLabel: {
            showMaxLabel: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          data: this.$store.state.dataTime
        },
        yAxis: {
          axisLabel: {
            margin: 5,
            textStyle: {
              color: '#ffffff'
            }
          }
          // min: Math.min(...this.$store.state.dataNet),
          // max: this.towNumber(Math.max(...this.$store.state.dataNet))
        },
        series: [
          {
            name: '账户收益率(%)',
            type: 'line',
            // data: this.$store.state.dataNet,
            data: this.$store.state.dataNet1,
            symbol: 'circle', // 折线拐点去掉圆点
            itemStyle: {
              normal: {
                color: '#D53F29',
                lineStyle: {
                  color: '#D53F29'
                }
              }
            },
            textStyle: {
              color: '#ffffff'
            }
          }
        ]
      }
      // 展示数据
      myChart.setOption(option)
    },
    reFlash() {
      socketsendgetfollowings()
      this.$store.state.accountdatas = []
      this.$store.state.transactiondatas = []
      this.$store.state.shareNET = []
      this.$store.state.shareTIME = []
      this.$store.state.dataTime = []
      this.$store.state.dataNet = []
      this.$store.state.dataNet1 = []
      this.$store.state.NET1 = []
      console.log(this.$store.state.followtoken)
      console.log(
        '发送成功' + this.$store.state.followtoken[this.$store.state.INDEX]
      )
      socketsendshare1(this.$store.state.followtoken[this.$store.state.INDEX])
      // socketsendshare1('0e1bc0f47a54bdf8ccbc4d50b63c2d3b')
    },
    turnNum(nums) {
      return nums.map(Number)
    },
    maxBack() {
      var peak = []
      var trough = []
      this.$store.state.dataNet1 = this.turnNum(this.$store.state.dataNet1)
      for (let i = 0; i < this.$store.state.dataNet1.length; i++) {
        this.$store.state.dataNet1[i] =
          this.$store.state.dataNet1[i] * 10000 + 1000000
      }
      console.log(this.$store.state.dataNet1)
      for (let i = 0; i < this.$store.state.dataNet1.length; i++) {
        if (
          this.$store.state.dataNet1[i] > this.$store.state.dataNet1[i + 1] &&
          this.$store.state.dataNet1[i] > this.$store.state.dataNet1[i - 1]
        ) {
          peak.push(this.$store.state.dataNet1[i])
        } else if (
          this.$store.state.dataNet1[i] < this.$store.state.dataNet1[i + 1] &&
          this.$store.state.dataNet1[i] < this.$store.state.dataNet1[i - 1]
        ) {
          trough.push(this.$store.state.dataNet1[i])
        }
      }
      if (
        this.$store.state.dataNet1[this.$store.state.dataNet1.length - 1] >
        this.$store.state.dataNet1[this.$store.state.dataNet1.length - 2]
      ) {
        peak.push(
          this.$store.state.dataNet1[this.$store.state.dataNet1.length - 1]
        )
      } else {
        trough.push(
          this.$store.state.dataNet1[this.$store.state.dataNet1.length - 1]
        )
      }
      console.log(peak)
      console.log(trough)
      const backdata = []
      const arr = []
      for (let x = 0; x < peak.length; x++) {
        backdata.push(((peak[x] - trough[x]) / peak[x]) * 100)
      }
      for (let c = 0; c < backdata.length; c++) {
        if (backdata[c] === backdata[c]) {
          arr.push(backdata[c])
        }
      }
      this.maxbackdata = Math.max(...arr)
      console.log(backdata)
      console.log(this.maxbackdata)
    },
    // getHQ1() {
    //   console.log('请求行情')
    //   websocket()
    // },
    // SUBsrcibe() {
    //   this.$store.state.arrexchange = []
    //   for (let i = 0; i < this.$store.state.transactiondatas.length; i++) {
    //     if (
    //       this.$store.state.transactiondatas[i].transaction.exchange === '深圳'
    //     ) {
    //       this.$store.state.arrexchange.push(
    //         '23123' + this.$store.state.transactiondatas[i].transaction.symbol
    //       )
    //     } else if (
    //       this.$store.state.transactiondatas[i].transaction.exchange === '上海'
    //     ) {
    //       this.$store.state.arrexchange.push(
    //         '18515' + this.$store.state.transactiondatas[i].transaction.symbol
    //       )
    //     }
    //   }
    //   // console.log(this.$store.state.arrexchange.join(','))
    // },
    getUnExchangeDay() {
      this.$axios
        .get('http://h5.lanmuda.com.cn/tradeinfo/unExchangeDay.txt')
        .then(res => {
          console.log(res.data)
          this.$store.state.unExchangeDay = res.data
        })
    }
  },
  watch: {
    CHANGE: function() {
      this.flashMyChart()
      console.log(this.$store.state.shareTIME[0])
      console.log(((new Date(this.$store.state.todayTime)) - (new Date(this.$store.state.shareTIME[0]))) / 1000 / 60 / 60 / 24)
      this.profit()
      console.log(this.$store.state.dataNet1)
      this.maxBack()
      this.show = true
    }
  },
  mounted() {
    this.getCurrentTime()
    // this.getUnExchangeDay()
    console.log(this.$store.state.INDEX)
    this.reFlash()
    this.show = false
    // setTimeout(() => {
    //   this.show = true
    // }, 1000)
    for (let n = 0; n < this.$store.state.accountdataspromote.length; n++) {
      if (
        this.$store.state.accountdataspromote[n].account ===
        this.$store.state.followaccount[this.$store.state.INDEX]
      ) {
        this.$store.state.id = n
      }
    }
  }
}
</script>
<style Lang="less" scoped>
#main {
  width: 355px;
  height: 300px;
  margin: 0 20px 0 20px;
}
.box {
  background-color: #0e0c22;
}
.profit {
  display: flex;
  flex-direction: row;
  /* justify-content: center;
  margin-left: 20px; */
}
.profit_left,
.profit_right {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}
.wp {
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  display: flex;
}
.briefIntroductionPhoto {
  width: 375px;
  height: auto;
}
.briefIntroduction {
  width: 100%;
  text-align: center;
  background-color: #0e0c22;
}
</style>
